<template>
    <div>
        <div>
           用户名 <el-input v-model="vo.username" placeholder="请输入用户名" style="width: 222px" ></el-input>
           账号 <el-input v-model="vo.accountid" placeholder="请输入内容" style="width: 222px"></el-input>
               
        创建时间：
      <el-date-picker
          v-model="vo.datebegin"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择日期时间">
      </el-date-picker>
      ~
      <el-date-picker
          v-model="vo.dateend"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择日期时间">
      </el-date-picker>
        金额 <el-input v-model="vo.moneybegin" placeholder="请输入最小金额" style="width: 222px" ></el-input>~
               <el-input v-model="vo.moneyend" placeholder="请输入最大金额" style="width: 222px" > </el-input>
                
  <el-button icon="el-icon-search" v-on:click="handSearch" circle></el-button>
                
                </div>

<el-table
    :data="tableData"
    border
    style="width: 100%">

    <el-table-column
      fixed
      prop="id"
      label="主键"
      width="150">
    </el-table-column>
    <el-table-column
      prop="username"
      label="账号名字"
      width="120">
    </el-table-column>
    <el-table-column
      prop="accountid"
      label="账号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="createdt"
      label="创建时间"
      width="120">
    </el-table-column>
    <el-table-column
      prop="money"
      label="存款金额"
      width="300">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleZz(scope.row)" type="text" size="small">转账</el-button>
        <el-button @click="handleCk(scope.row)" type="text" size="small">存款</el-button>
        <el-button @click="handleQk(scope.row)" type="text" size="small">支出</el-button>
        
      </template>
    </el-table-column>
  </el-table>

<div class="block">

  <el-pagination
    layout="prev, pager, next"
    :current-page="currPage"
    :page-size="pageSize"
    :total="pageTotal"
    @current-change="handlePageChange"
    >
  </el-pagination>



</div>


<el-dialog title="收货地址" :visible.sync="dialogFormVisible">

   
  <el-form :model="form">
    <el-form-item label="本身账号" :label-width="formLabelWidth">
      <el-input v-model="form.aid" autocomplete="off" disabled="true"></el-input>
    </el-form-item>

    <el-form-item label="转账人员账号" :label-width="formLabelWidth">
      <el-input v-model="form.toaccountid" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="转账金额" :label-width="formLabelWidth">
      <el-input v-model="form.money" autocomplete="off"></el-input>
    </el-form-item>
    
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="handConfim">确 定</el-button>
  </div>
</el-dialog>




<el-dialog title="存款取款" :visible.sync="dialogFormVisible1">
  <el-form :model="form">
    <el-form-item label="本身账号" :label-width="formLabelWidth">
      <el-input v-model="form.aid" autocomplete="off" disabled="true"></el-input>
    </el-form-item>


    <el-form-item label="类型" :label-width="formLabelWidth"  disabled="true">
      <el-radio disabled v-model="form.moneytype" label="1">存款</el-radio>
      <el-radio disabled v-model="form.moneytype" label="0">取款</el-radio>
  </el-form-item>




    <el-form-item label="金额" :label-width="formLabelWidth">
      <el-input v-model="form.money" autocomplete="off"></el-input>
    </el-form-item>
    
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="handConfimCqk">确 定</el-button>
  </div>
</el-dialog>




        
    </div>
</template>


<script>
import axios from 'axios';
 
export default {

    methods: {
      handConfimCqk(){
        axios.post('http://127.0.0.1:8089/account/adddetail' , this.form)
         .then(res=>{
            this.dialogFormVisible1 = false ;
            this.search();

         })


      },
      handleQk(row){
         this.form.aid = row.id ;
       this.form.moneytype = "0" ;
       this.form.money =0 ;
           this.dialogFormVisible1 = true ;

      },
      handleCk(row){
       this.form.aid = row.id ;
       this.form.moneytype = "1" ;
           this.form.money =0 ;
           this.dialogFormVisible1 = true ;
      },
      handleZz(row){
       this.form.aid = row.id ;
       this.dialogFormVisible = true ;

      },
      handConfim(){
   axios.post('http://127.0.0.1:8089/account/add' , this.form)
         .then(res=>{
            this.dialogFormVisible = false ;
            this.search();

         })



      },
      handSearch(){

       this.search();
      },
        search(){
       // this.currPage = cp ;
        axios.post('http://127.0.0.1:8089/account/search/' + this.currPage +"/"+ this.pageSize , this.vo)
         .then(res=>{
            this.tableData = res.data.rows;
            this.pageTotal = res.data.total;
          
         })

     

        },
        handlePageChange(val){
          this.currPage = val ;
          this.search();

        }

    },
    data() {
        return {
         vo:{},
          tableData: [],
        currPage:1,
        pageSize:2,
        pageTotal:100,
         dialogFormVisible: false,
         dialogFormVisible1: false ,
        form: {
          name: '',
          toaccountid: '',
          money: 0
        }

        }

    } ,
     created() {
      this.search();
      
    }
   

}
</script>